<template>
    <charts :chartOptions="chartOptions" id="myCharts" class="chart" />
</template>
<script lang="js">
    import Charts from "@/components/Charts.vue"

    export default ({
        name: 'echarts',
        components: {Charts},
        data() {
            return {
                chartOptions: {
                    title: {
                        text: '统计',
                        x: 'center'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数值'],
                        left: 'right',
                    },
                    xAxis: {
                        data: ['地区1', '地区2', '地区3', '地区4', '地区5', '地区6', '地区7', '地区8', '地区9', '地区10', '地区11', '地区12']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '数值',
                            type: 'bar',
                            data: [15, 12.28, 14.15, 14.12, 13.45, 13.21, 11.75, 12.92, 11.27, 11.12, 10.64, 11.42]
                        }
                    ]
                }
            }
        }
    })
</script>

<style scoped>
    .chart {
        width: max-content;
        margin: 20px auto;
    }
</style>